<template>
	<div class="count-down layout" v-if="type">
		<i class="day black  fs18rem" v-if="day>0">{{ day }}天</i>
		<!-- <strong class="pl5rem pr5rem" v-if="day>0"><i class="bg-red"></i><i class="mt10rem bg-red"></i></strong> -->
		<span class="white bg-red  fs10">{{ hour }}</span>
		<strong class="pl5rem pr5rem"><i class="bg-red"></i><i class="mt10rem bg-red"></i></strong>
		<span class="tiem-center white  bg-red  fs10">{{ minute }}</span>
		<strong class="pl5rem pr5rem"><i class="bg-red"></i><i class="mt10rem bg-red"></i></strong>
		<span class="white bg-red  fs10">{{ second }}</span>
	</div>
	<div class="count-down-two" v-else>
		<span v-if="day>0">{{ day }}</span>
		<strong v-if="day>0"><i>天</i></strong>
		<span>{{ hour }}</span>
		<strong><i>小时</i></strong>
		<span class="tiem-center">{{ minute }}</span>
		<strong><i>分</i></strong>
		<span>{{ second }}</span>
		<strong><i>秒</i></strong>
	</div>
</template>
<script>
	export default{
		name: 'Countdown',
		data()
		{
			return{
				section: this.data
			}
		},
		props:
		{
			data:{
				 type: [String,Number],
				 default: Number
			},
			 type:{
                type: Boolean,
            }
		},
		created()
		{
			this.countdown()
		},
		computed: {
			day()
			{
				return Math.floor(this.section / 86400) < 10 ? '0' + Math.floor(this.section / 86400) : Math.floor(this.section / 86400) ;
			},
			hour()
			{
				return Math.floor(this.section % 86400 / 3600) < 10 ? '0' + Math.floor(this.section % 86400 / 3600) : Math.floor(this.section % 86400 / 3600);
			},
			minute()
			{
				 return Math.floor(this.section % 3600 / 60) < 10 ? '0' + Math.floor(this.section % 3600 / 60) : Math.floor(this.section % 3600 / 60);
			},
			second()
			{
				return Math.floor(this.section % 60) < 10 ? '0' +  Math.floor(this.section % 60) :  Math.floor(this.section % 60);
			}
		},
		methods:{
			countdown()
			{
				var itv = setInterval(() => {
					if (this.section > 0)
						--this.section;
					else
						clearInterval(itv);
				}, 1000);
			}
		}
	}
</script>
<style lang="less">
.count-down{
		span{
			border-radius: 5/28rem;
			width:35/28rem;
			height: 35/28rem;
			line-height: 35/28rem;
			text-align: center;
			// display: inline-block;
		}
		strong{
			i{
				display:block;
				width: 4/28rem;
				height: 4/28rem;
			}
		}
	}
</style>